<template>
  <div class="app-container">


    <el-form ref="articleAddform" :model="articleAddform"  :rules="articleAddRules" label-width="20px">

      <el-form-item   prop="articleTitle">
        <el-input v-model="articleAddform.articleTitle"
                  placeholder="请输入标题"
                  style="padding-right:20px">
          <template slot="prepend">标题</template>
        </el-input>
      </el-form-item>


      <el-row :gutter="5">
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-form-item>
              <el-select v-model="articleAddform.articleType" placeholder="原创">
                <el-option label="原创" value="1"/>
                <el-option label="转载" value="2"/>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-form-item>
              <el-switch v-model="articleAddform.isVisable" active-text="是否公开"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <!--编辑 预览  markdown -->
     <el-form-item prop="articleContent"    >
        <mavon-editor
          v-model="articleAddform.articleContent"
          style="{ padding-right:20px ;     height: 600px;  }"
         />
      </el-form-item>


      <div align="center">

        <el-form-item>
          <el-button
            :loading="isLoading"
            type="primary"
            @click="onSubmitArticle">提交</el-button>
        </el-form-item>
      </div>






    </el-form>


  </div>
</template>

<script>
  import {getBlogContentById} from '@/api/apis'

  export default {

    data() {

      const validateTitle = ( rule, value, callback) => {
        if (value.length <= 0) {
          callback(new Error('不能为空'))
        } else {
          callback()
        }
      }

      return {
        articleAddform: {
          articleTitle: '', // 标题
          isVisable: true, // 是否可见
          articleContent: '', // 正文内容
          articleType: '原创'  ,// 原创、非原创
          blogId: 0

        } ,
        articleAddRules: {
          articleTitle:  [{ required: true, trigger: 'blur', validator: validateTitle }] ,
          articleContent: [{ required: true, trigger: 'blur', validator: validateTitle }]

        } ,
        isLoading : false  ,
        titleContent:'' ,
        markdownContent:" " ,
      }
    },
    created() {
      let  blogId = this.$route.query.blogId;
     this.fetchData(blogId)
    },
    methods: {
      onSubmitArticle() {
        this.$refs.articleAddform.validate(  valid => {
          if (valid) {
            this.isLoading = true

            // 之所以能直接使用 articleUpdateByIdAction ， 是因为在 store文件夹下的 index.js中配置了 wkArticle.js
            this.$store.dispatch( 'articleUpdateByIdAction', this.articleAddform).then( () => {
              this.$message.success('更新成功');
              this.isLoading = false
              this.$router.push(  { path:    '/list/manage' } )
            }).catch(() => {
              this.$message.error('更新失败，请稍后重试');
              this.isLoading = false
            })



          } else {
            this.isLoading = false
            this.$message.error('请按要求填写')
          }
        })

      } ,
      fetchData( blogId ) {
        this.articleAddform.blogId=blogId ;
        getBlogContentById( blogId).then(response => {
          this.articleAddform.articleTitle = response.blogTitle ;
          this.articleAddform.articleContent = response.blogContent;
        })
      }




    }// end methods
  }
</script>

<style scoped>


</style>

